<template>
	<view class="content">
		<view class="swiper">
			<uni-swiper-dot :info="list" :current="current" field="content" mode="round" :dots-styles="dotStyle">
				<swiper @change="change" autoplay class="swiperContainer">
					<swiper-item v-for="item in list" :key="item">
						<image class="img" :src="item" mode="widthFix" />
					</swiper-item>
				</swiper>
			</uni-swiper-dot>
		</view>

		<view class="tabs">
			<u-sticky bgColor="#fff" class="sticky">
				<u-tabs :list="indexTabs" :is-scroll="false" :current="current2" @change="getGoods" :scrollable="false"
					lineColor="#d81e06" :activeStyle="{color:'#d81e06'}" :inactiveStyle="{color:'black'}"
					itemStyle="height:44px ; width:25%">
				</u-tabs>
			</u-sticky>
			<good-list :list="goods" class="zj"></good-list>
			
			<view v-if="isShow" class="img">
				<image src="../../static/mescroll-empty.png"  mode="widthFix"></image>
			</view>
			
			<u-loadmore :status="status"></u-loadmore>
		</view>
		
		<view class="top-back" @click="topBack" v-if="isShowTop">
			<image src="../../static/top.png"></image>
		</view>
	</view>
</template>

<script>
	// 引入请求文件
	//还要引入就 ,xx	
	import {
		apiBanner,
		apiIndexTabs,
		apiGoods
	} from '../../api/mock';
	export default {
		data() {
			return {
				list: [],
				current: 0,
				dotStyle: {
					backgroundColor: '#888888',
					selectedBackgroundColor: 'white',
				},
				indexTabs: [],
				goods: [],
				current2: 0,
				p : 1,		// 当前页码
				num : 6,	// 每页条数
				status:'loading',
				isShow:false,
				isShowTop:false,
			}
		},
		onPageScroll(e) {
			// console.log('e:',e)
			if (e.scrollTop >= 350) {
				// 显示
				this.isShowTop = true
			} else {
				// 隐藏
				this.isShowTop = false
			}
		},
		onLoad() {
			// 当页面加载完成后，请求各类数据
			this.getBanner();
			this.getIndexTabs();
			// bug:由于请求返回需要1秒，为了顺利获取数据设置定时器2秒后再执行该函数
			setTimeout(() => {
				this.getGoods({
					index: 0
				});
			}, 1100)
		},
		// 触底——添加商品的下一页数据
		onReachBottom() {
			this.p++;		//每次触底页码自增
			// 根据最近一次的选项卡改变事件中，获取的选项卡下标，提取出来名称
			this.status = 'loading'
			let tabname = this.indexTabs[this.current2].name;
			// 获取触底后的页码对应的数据
			apiGoods( this.p,this.num,tabname).then((res)=>{
				console.log(res);
				if(res == ''){
					this.status = 'nomore';
				}
				this.goods = [...this.goods ,...res];
			}).catch((err)=>{
				console.log(err);
			})
		},
		// 下拉重置整个页面:重置data函数初始化；页面数据重新发起请求
		onPullDownRefresh() {
			setTimeout(() => {
				// 关闭下拉
				uni.stopPullDownRefresh();
				this.current2 = 0;
				this.p = 1;
				this.getBanner();
				this.getIndexTabs();
				this.getGoods({
					index: 0
				});
				uni.showToast({
					icon: 'none',
					title: '刷新成功'
				})
			}, 1000)
		},
		methods: {
			topBack() {
				uni.pageScrollTo({
					scrollTop: 0, // 滚动到页面的目标位置  这个是滚动到顶部, 0 
					duration: 300 // 滚动动画的时长
				})
			},
			// 调用请求轮播数据的函数
			getBanner() {
				// 调用请求
				apiBanner('asc').then((res) => {
					
					console.log(res);
					this.list = res;
				}).catch((err) => {
					console.log(err);
				})
			},
			getIndexTabs() {
				apiIndexTabs().then((res) => {
					
					console.log(res);
					this.indexTabs = res;
				}).catch((err) => {
					console.log(err);
				})
			},
			getGoods(e) {
				this.current2 = e.index;
				let tabname = this.indexTabs[e.index].name;
				this.p = 1;
				this.goods = [];
				this.status = 'loading';
				this.isShow = false;
				apiGoods(this.p,this.num,tabname).then((res) => {
					
					this.goods = [...res];
					if(this.goods==''){
						this.isShow = true;
						this.status = 'nomore';
					}
				}).catch((err) => {
					console.log(err);
				})
			},
			change(e) {
				this.current = e.detail.current;
			}
		}
	}
</script>

<style lang="scss">
	.content {
		width: 100%;
	}

	.swiper {
		height: 120px;
		padding-bottom: 40px;
	}

	.swiperContainer .img {
		width: 100%;
	}

	.tabs {
		width: 100%;
	}
.tabs .img{
	display: flex;
	justify-content: center;
}
	.top-back image {
		width: 40px;
		height: 40px;
		position: fixed;
		top: 650px;
		right: 1px;
	}
	.sticky{
		position: sticky;
		top: 30px;
	}
</style>